<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>微博首页</h1>
<div>
  <div v-if="isLogin">
    <p>欢迎{{user.nickname}}回来!</p>
    <a href="/insert.html">发布微博</a>
    <a href="javascript:void(0)" @click="logout()">登出</a>
  </div>
  <div v-else>
    <a href="/reg.html">注册</a>
    <a href="/login.html">登录</a>
  </div>
  <hr>
  <!-- 显示所有微博数据 -->
  <div v-for="weibo in arr">
    <h3>{{weibo.nickname}}说:{{weibo.content}}</h3>
    <img :src="weibo.url" width="100">
  </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
     el:"body>div",
     data:{
       isLogin:false,
       user:{
         nickname:"刘德华"
       },
       arr:[]
     },
    created:function () {
       //发请求获取当前登录的用户信息,currentUser当前的登录用户
       axios.get("/currentUser").then(function (response) {
         v.user = response.data;
         //如果当前客户端没有登录的话得到的是空字符串
         //如果空串代表没有登录,isLogin则为false,如果不是空串则代表已经登录,isLogin为true
         v.isLogin = v.user == "" ?false:true;
       })
      //发送请求获取所有的微博数据
      axios.get("/select").then(function (response) {
        v.arr = response.data;
      })
    },
    methods:{
       logout() {
         //发出退出登录的请求
         axios.get("/logout").then(function (response) {
             location.reload(); //刷新
         })
       }
    }
  })
</script>
</body>
</html>